<template>

    <el-main style="padding:0 20px;">
        <el-descriptions :column="1" border size="small">
            <el-descriptions-item label="请求接口">{{ data.url }}</el-descriptions-item>
            <el-descriptions-item label="请求方法">{{ data.type }}</el-descriptions-item>
            <el-descriptions-item label="状态代码">{{ data.code }}</el-descriptions-item>
            <el-descriptions-item label="日志名">{{ data.name }}</el-descriptions-item>
            <el-descriptions-item label="日志时间">{{ data.time }}</el-descriptions-item>
        </el-descriptions>
        <el-collapse v-model="activeNames" style="margin-top: 20px;">
            <el-collapse-item title="常规" name="1">
                <el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
            </el-collapse-item>
            <el-collapse-item title="详细" name="2">
                <div class="code">
                    Request: {
                    User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
                    },
                    Response: {
                    Content-Type: "application/json; charset=utf-8",
                    Date: "Fri, 25 Jun 2021 03:02:14 GMT",
                    Server: "nginx/1.17.8"
                    }
                </div>
            </el-collapse-item>
        </el-collapse>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            data: {},
            activeNames: ['1'],
            typeMap: {
                'info': "info",
                'warn': "warning",
                'error': "error"
            }
        }
    },
    methods: {
        setData(data) {
            this.data = data
        }
    }
}
</script>

<style scoped>
.code {
    background: #848484;
    padding: 15px;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
}
</style>
